<template>
<view class="container">
	<block v-if="isload">
		<block v-if="cartlist.length>0">
			<view class="cartmain">
				<block v-for="(item, index) in cartlist" :key="item.id">
					<view class="item">
						<view class="content flex-y-center">
							<view @tap.stop="changeradio" :data-index="index" class="radio" :style="item.checked ? 'background:'+t('color1')+';border:0' : ''"><image class="radio-img" src="/static/img/checkd.png"/></view>
							<image :src="item.product.pic" class="img" @tap="gotoFun" :data-url="'/pages/shop/product?id=' + item.product.id"/>
							<view class="detail">
								<view class="title"><text>{{item.product.name}}</text></view>
								<view class="desc"><text>价值：￥{{item.product.sell_price}}</text></view>
								<view class="buynum flex flex-y-center">
									<view class="price flex1" :style="{color:t('color1')}"><text v-if="item.product.money_price>0">￥{{item.product.money_price}}+</text>{{item.product.score_price}}{{t('积分')}}</view>
									<view class="f2 flex flex-y-center">
										<view class="minus flex-x-center" @tap="gwcminus" :data-index="index" :data-cartid="item.id" :data-num="item.num">-</view>
										<input class="flex-x-center" type="number" :value="item.num" @blur="gwcinput" :data-max="item.product.stock" :data-index="index" :data-cartid="item.id" :data-num="item.num"></input>
										<view class="plus flex-x-center" @tap="gwcplus" :data-index="index" :data-max="item.product.stock" :data-num="item.num" :data-cartid="item.id">+</view>
									</view>
								</view>
							</view>
							<view class="prodel" @tap="cartdelete" :data-cartid="item.id"><image src="/static/img/del.png"/></view>
						</view>
					</view>
				</block>
			</view>
			
			<view style="height:auto;position:relative">
				<view style="width:100%;height:110rpx"></view>
				<view class="footer flex" :class="menuindex>-1?'tabbarbot':'notabbarbot'">
					<view class="text1">合计：</view>
					<view class="text2" :style="{color:t('color1')}"><text v-if="totalmoney>0">￥{{totalmoney}}+</text><text>{{totalscore}}{{t('积分')}}</text></view>
					<view class="flex1"></view>
					<view class="op" @tap="toOrder" :style="{background:'linear-gradient(-90deg,'+t('color1')+' 0%,rgba('+t('color1rgb')+',0.8) 100%)'}">去结算</view>
				</view>
			</view>

		</block>
		<block v-else>
			<view class="data-empty">
				<image :src="pre_url+'/static/img/cartnull.png'" class="data-empty-img" style="width:120rpx;height:120rpx"/>
				<view class="data-empty-text" style="margin-top:20rpx;font-size:24rpx">购物车空空如也~</view>
				<button style="width:400rpx;border:1px solid #ff6801;border-radius:6rpx;background:#ff6801;margin-top:20px;color:#fff" @tap="goto" data-url="index">去选购</button>
			</view>
		</block>
	</block>
	<loading v-if="loading"></loading>
	<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
	<popmsg ref="popmsg"></popmsg>
</view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
			opt:{},
			loading:false,
      isload: false,
			menuindex:-1,
			initdata:{},
			pre_url:app.globalData.pre_url,

			cartlist:[],
			totalscore:0,
      totalmoney: '0.00',
      selectedcount: 0,
    };
  },
  
  onLoad: function (opt) {
		this.opt = app.getopts(opt);
  },
	onShow:function(){
		this.getdata();
	},
	onPullDownRefresh: function () {
		this.getdata();
	},
  methods: {
    getdata: function (){
      var that = this;
			that.loading = true;
      app.get('ApiScoreshop/cart', {}, function (res) {
				that.loading = false;
        that.cartlist = res.cartlist;
        var cartlist = res.cartlist;
        for (var i in cartlist) {
					cartlist[i].checked = true;
        }
        that.calculate();
				that.loaded();
      });
    },
    changeradio: function (e) {
      var that = this;
      var index = e.currentTarget.dataset.index;
			var cartlist = that.cartlist;
      var checked = cartlist[index].checked;
			if(checked){
				cartlist[index].checked = false;
			}else{
				cartlist[index].checked = true;
			}
			that.cartlist = cartlist;
      that.calculate();
    },
    calculate: function () {
      var that = this;
      var cartlist = that.cartlist;
      var totalmoney = 0.00;
      var totalscore = 0.00;
      var selectedcount = 0;
      for (var i in cartlist) {
				if (cartlist[i].checked) {
					var thiscart = cartlist[i];
					totalmoney += thiscart.product.money_price * thiscart.num;
					totalscore += thiscart.product.score_price * thiscart.num;
					selectedcount += thiscart.num;
				}
      }
      that.totalmoney = totalmoney.toFixed(2);
      that.totalscore = totalscore;
      that.selectedcount = selectedcount;
    },
    checkpro: function (e) {
      var that = this;
      var ids = e.detail.value;
      that.ids = ids;
      that.calculate();
    },
    cartdelete: function (e) {
      var that = this;
      var id = e.currentTarget.dataset.cartid;
      app.confirm('确定要从购物车移除吗?', function () {
        app.post('ApiScoreshop/cartdelete', {id: id}, function (data) {
          app.success('操作成功');
          setTimeout(function () {
            that.getdata();
          }, 1000);
        });
      });
    },
    toOrder: function () {
      var that = this;
      var cartlist = that.cartlist;
      var prodata = [];
      for (var i in cartlist) {
				if (cartlist[i].checked) {
					prodata.push(cartlist[i].proid + ',' + cartlist[i].num);
				}
      }
      if (prodata.length == 0) {
        app.error('请先选择产品');
        return;
      }
      app.goto('buy?prodata=' + prodata.join('-'));
    },
    //加
    gwcplus: function (e) {
      var index = parseInt(e.currentTarget.dataset.index);
      var maxnum = parseInt(e.currentTarget.dataset.max);
      var cartid = e.currentTarget.dataset.cartid;
      var num = parseInt(e.currentTarget.dataset.num);
      if (num >= maxnum) {
        app.error('库存不足');
        return;
      }
			var cartlist = this.cartlist;
			cartlist[index].num++;
			this.cartlist = cartlist
			this.calculate();
      var that = this;
      app.post('ApiScoreshop/cartChangenum', {id: cartid,num: num + 1}, function (data) {
        if (data.status == 1) {
          //that.getdata();
        } else {
          app.error(data.msg);
        }
      });
    },
    //减
    gwcminus: function (e) {
      var index = parseInt(e.currentTarget.dataset.index);
      var maxnum = parseInt(e.currentTarget.dataset.max);
      var cartid = e.currentTarget.dataset.cartid;
      var num = parseInt(e.currentTarget.dataset.num);
      if (num == 1) return;
			var cartlist = this.cartlist;
			cartlist[index].num--;
			this.cartlist = cartlist
			this.calculate();
      var that = this;
      app.post('ApiScoreshop/cartChangenum', {id: cartid,num: num - 1}, function (data) {
        if (data.status == 1) {
          //that.getdata();
        } else {
          app.error(data.msg);
        }
      });
    },
    //输入
    gwcinput: function (e) {
      var index = parseInt(e.currentTarget.dataset.index);
      var maxnum = parseInt(e.currentTarget.dataset.max);
      var cartid = e.currentTarget.dataset.cartid;
      var num = e.currentTarget.dataset.num;
      var newnum = parseInt(e.detail.value);
      console.log(num + '--' + newnum);
      if (num == newnum) return;

      if (newnum > maxnum) {
        app.error('库存不足');
        return;
      }
			var cartlist = this.cartlist;
			cartlist[index].num = newnum;
			this.cartlist = cartlist
			this.calculate();

      var that = this;
      app.post('ApiScoreshop/cartChangenum', {id: cartid,num: newnum}, function (data) {
        if (data.status == 1) {
          //that.getdata();
        } else {
          app.error(data.msg);
        }
      });
    },
		addcart:function(){
			this.getdata();
		}
  }
};
</script>
<style>
.cartmain .item {width: 94%;margin:20rpx 3%;background: #fff;border-radius:20rpx;padding:30rpx 3%;}

.cartmain .item .radio{flex-shrink:0;width: 32rpx;height: 32rpx;background: #FFFFFF;border: 2rpx solid #BFBFBF;border-radius: 50%;margin-right:30rpx}
.cartmain .item .radio .radio-img{width:100%;height:100%}

.cartmain .item .content {width:100%;margin:0;position: relative;}
.cartmain .item .content .check {width:70rpx;margin-top: 30rpx;}
.cartmain .item .content .img {width: 140rpx;height: 140rpx;}
.cartmain .item .content .detail {flex:1;margin-left:16rpx}
.cartmain .item .content .detail .title {padding-right:40rpx;color: #222222;font-weight:bold;font-size:26rpx;line-height:34rpx;margin-bottom:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;height:68rpx}
.cartmain .item .content .detail .desc {height: 46rpx;line-height: 46rpx;color: #666;overflow: hidden;font-size: 24rpx;}
.cartmain .item .content .prodel{width:24rpx;height:24rpx;position:absolute;top:0;right:0}
.cartmain .item .content .prodel image{width:100%;height:100%}

.cartmain .item .buynum .price{height: 46rpx;display:flex;align-items:center;font-size:26rpx;font-weight:bold}
.cartmain .item .buynum .f2{ border:1px solid #f1f1f1}
.cartmain .item .buynum .f2 input{flex:1;width:70rpx;border-left:1px solid #f1f1f1;border-right:1px solid #f1f1f1;text-align:center;color:#333;font-size:26rpx}
.cartmain .item .buynum .f2 .plus{width:50rpx;}
.cartmain .item .buynum .f2 .minus{width:50rpx;}

.cartmain .item .bottom{width: 94%;margin: 0 3%;border-top: 1px #e5e5e5 solid;padding: 10rpx 0px;overflow: hidden;color: #ccc;display:flex;align-items:center;justify-content:flex-end}
.cartmain .item .bottom .f1{display:flex;align-items:center;color:#333}
.cartmain .item .bottom .f1 image{width:40rpx;height:40rpx;border-radius:4px;margin-right:4px}
.cartmain .item .bottom .op {border: 1px #ff4246 solid;border-radius: 10rpx;color: #ff4246;padding: 0 10rpx;height: 46rpx;line-height: 46rpx;margin-left: 10rpx;}

.footer {width: 100%;background: #fff;margin-top: 5px;position: fixed;left: 0px;bottom: 0px;z-index:8;display:flex;align-items:center;padding:0 20rpx;border-top:1px solid #EFEFEF}
.footer .text0{color:#666666;font-size:24rpx;}
.footer .text1 {height: 110rpx;line-height: 110rpx;color:#444;font-weight:bold;font-size:24rpx;margin-right:10rpx}
.footer .text2 {color: #F64D00;font-size: 30rpx;font-weight:bold}
.footer .op{width: 216rpx;height: 80rpx;line-height:80rpx;border-radius: 6rpx;font-weight:bold;color:#fff;font-size:28rpx;text-align:center;margin-left:30rpx}

.data-empty {width: 100%; text-align: center; padding-top:100rpx;padding-bottom:100rpx}
.data-empty-img{ width: 300rpx; height: 300rpx; display: inline-block; }
.data-empty-text{ display: block; text-align: center; color: #999999; font-size:32rpx; width: 100%; margin-top: 30rpx; }
</style>